/**
 * 对 axios 进行二次封装
 */

import axios from 'axios'

// 引入进度条插件和样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 创建 axios 实例
const request = axios.create({
  // 请求的基准地址
  baseURL: 'http://sph-h5-api.atguigu.cn',
  // 请求超时，超过几秒数据还没返回给用户提示错误
  timeout: 5000
})

// 添加请求拦截器
request.interceptors.request.use(
  (config) => {
    // 展示进度条
    NProgress.start()

    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
request.interceptors.response.use(
  (response) => {
    // 隐藏进度条
    NProgress.done()

    // 返回服务器真正响应的数据
    return response.data
  },
  (error) => {
    // 在 响应拦截器的第二个回调中，处理响应的错误
    // 什么时候会执行到 error
    // 1. 网络超时
    // 2. 状态码不以 2 开头

    // 需求：如果是网络错误或者状态码不是以 2 开头，统一提示错误
    // 在组件中不处理这两种错误
    console.log('我执行到了~~~~~')

    // Promise 返回值
    // 返回的数据不是 Promise，执行的结果会一直走 .then
    // return error

    // 第一种方式：直接将错误返回出去，但是这种返回方式不符合需求
    // return Promise.reject(error)

    // 将错误统一进行提示，后面换成好看的弹框
    alert(error.message)

    // 第二个方式：直接返回一个 Promise，代码就处于 pending 状态，就不会向下传递
    return new Promise(() => {})
  }
)

export default request
